<template>
  <div class="container">
      <div class="table-data">
        <el-card class="box-card">
            <el-row style="margin-bottom:20px;display:flex;justify-content: space-between;align-items: center;">
                <el-col :span="10">
                <!-- 刷新 -->
                <el-button type="warning" icon="el-icon-plus" size="small" >新增</el-button>
                
                <!-- 编辑 -->
                <el-button type="primary" icon="el-icon-edit" size="small" >修改</el-button>

                <!-- 删除 -->
                <el-button type="danger" icon="el-icon-delete" size="small">删除</el-button>
                </el-col>
                
                <el-col :span="4" :offset="10" >
                <el-input placeholder="请输入内容">
                    <template slot="append">
                    <el-button slot="append" icon="el-icon-search" ></el-button>
                    </template>
                </el-input>
                </el-col>
            </el-row>

            <el-table
            :data="dataShow"
            stripe
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column prop="price" label="价格"></el-table-column>
                <el-table-column prop="number" label="数量"></el-table-column>
                <el-table-column prop="creationTime" label="创建时间"></el-table-column>
                <el-table-column label="操作" width="182px">
                    <template >
                        <el-button type="text" icon="el-icon-edit" size="mini" >修改</el-button>
                        <el-button type="text" icon="el-icon-delete" size="mini" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
            style="margin-top:20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
            
        </el-card>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
           dataShow:[
                {id:1,name:'拖鞋',price:'100.00',number:'1',creationTime:'2020-10-24',}
            ],
            total:1,
            currentPage:1,
            pageSize:1,
        }
    },
    methods:{
      handleSizeChange(){},
      handleCurrentChange(){},
      handleSelectionChange(){}
    }
}
</script>

<style lang="less" scoped>
/deep/.el-table__body-wrapper {
    font-size: 13px;
}
.container {
  min-height: 850px;
  background: #f6f6f6;
  padding-top: 20px;

  .table-data{
      padding: 0 20px;
  }

  .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /deep/.el-table td, /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-form-item__label {
    width: 80px !important;
  }
  /deep/.el-input {
    width: 98%;
  }
}
</style>